iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Modern Web

想轉職的鯊魚從零基礎開始學習JavaScript系列 第 28

想轉職的鯊魚從零基礎開始學習JavaScript Day-28 Function-parameters & Arrow function expressions 函式 - 參數 與 箭頭函式

  • 分享至 

  • xImage
  •  

前言

不知不覺已經到最後三天了,感覺需要收尾了,但是還有好多東西要學阿!!!我也從什麼都不懂得小屁鯊,蛻變成一隻知道自己還有好多東西不懂的大笨鯊(笑),笑歸笑,我還是從中學會很多東西,同時也知道很多平常不會用到而且不重要的資訊,但是唯一不變的事情就是,基礎打好才能往下走,一起跟鯊魚站穩腳步繼續前行吧。

Default parameters 預設參數

當我們製作一個函式,在呼叫的時候很容易遇到,參數數量的錯誤,像是多引入一個參數或是少引入一個參數的狀況,如果是多引入那也還好頂多那多引入的參數不作用,但是少引入就很致命了,會讓整個函式報錯,為此JavaScript有一個Default parameters(預設參數)的功能,讓使用者在少引入參數的情況下也能正常運行函式。

  • Syntax語法

function 函式名稱(參數1 = 預設值1, … , 參數N = 預設值N) {
函式的運行式
}

從原本的函式的語法延伸,在參數後面賦予一個值,即是該參數的預設值,當該參數沒有被引入的時候,就會使用預設值去表示。
當參數沒有預設值時,會使用預設的undefined,這也就是為什麼,當參數少引入時會出錯誤,因為有undefined去介入函式的運行式,所以會出現預期外的錯誤。

The arguments object (引數)

The arguments object是一個類矩陣(僅有幾個矩陣的特性,跟矩陣相似卻不是矩陣),由函式的參數組成,可以用arguments[index]呼叫出相對應的參數,比較特別的是,arguments只要有索引,可以呼叫出預期外的參數,不過如果有預期外的參數,建議使用Rest parameters(其餘參數)去處理。

Note:The arguments object不能用在Arrow function expressions(箭頭函式)

Rest parameters 其餘參數

Rest parameters是一個為了處理不確定數量的參數而誕生的語法。

  • Syntax語法

function 函式名稱(參數a, 參數b, ...theArgs) {
函式的運行式
}

在函式最後一個參數的後面加上, ...theArgs
也就是其餘參數必須是最後一個參數,一個函式只能有一組其餘參數

...為前綴,在theArgs之前
theArgs為一個變數名稱,實質內容是一個陣列,負責乘載Rest parameters

相較於The arguments object,更推薦使用Rest parameters,

  • Rest parameters是一個Array陣列,可以使用陣列相關的語法
  • arguments是一個類陣列,僅能使用部分的陣列語法
  • 可以直接綁定其餘的參數,不像arguments還要計算索引位置,只要新增一個新參數就有可能造成函式的錯誤

用Rest parameters求陣列的最大最小值 2022/10/25 新增

Rest parameters是一個陣列,所以theArgs也可以用一個陣列代替

因此可以運用個特性,將陣列內值的當作參數取出

記得先前用Math.max/min求最大最小值的方式嗎?配合上Rest parameters就可以求出陣列的最大最小值了。

  • 求最大Math.max(...Array)
  • 求最小Math.min(...Array)

Arrow function expressions 箭頭函式

這是一個ES6新增的語法,箭頭函式,相於傳統的 function expression函式表達式,這是一個較為簡潔的語法。

會被稱作箭頭函式,主要因為它的語法裡面有一個=>,看起來像是一個箭頭所以有這個稱呼。

  • Syntax語法
    • parameters => expression
    • (parameters) => expression

不需要宣告這是一個函式(function開頭),並省略了函式名稱,僅有參數與表達式。

()argument parentheses參數誇號,可有可無,但是在沒有參數時不可以省略,

() => expression

箭頭函式雖然簡略了語法,但是在使用上多了一些限制

  • 不能使用this, arguments, super,也不能在物件中用箭頭函式建立methods
  • 不能訪問new.target
  • 不適用 call, apply, bind這三個方法。
  • 無法使用建構式(不能使用new 跟 prototype)
  • 無法使用yield

結語

一步一步來,前一陣子做了函式的基礎介紹,現在要慢慢地深入了,一步一步理解所有物件的全貌,事情都是逐步漸進的,如果一隻鯊魚理解不了,那就用兩隻鯊魚吧!!!

鯊語錄

參考資料

ECMA-262
MDN-Functions


上一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-27 RegExp 正規運算式 (二)
下一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-29 Function- Method definitions & getter & setter 物件內的函式 與 get & set
系列文
想轉職的鯊魚從零基礎開始學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言